<template>
  <div class="FramePanelLayout" :class="{right:rightPanel}">
    <div class="FramePanelLayout--title" v-if="title">
      <div class="FramePanelLayout--title__icon"></div>
      <div class="FramePanelLayout--title__label">{{ title }}</div>
      <div class="FramePanelLayout--title__subtitle">
        <slot name="subtitle"></slot>
      </div>
    </div>
    <div class="FramePanelLayout--content">
      <slot></slot>
    </div>
    <div class="FramePanelLayout--topline"></div>
    <div class="FramePanelLayout--bottomline"></div>
    <div class="FramePanelLayout--rightTop"></div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      rightPanel: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return{}
    },
    created(){},
    mounted(){},
    methods:{},
 }
</script>

<style scoped lang="scss">
.FramePanelLayout{
  position: relative;
  background-image: url('@/assets/screen/背景1.png');
  background-size: cover;
  width: 439px;
  height: 100%;
  padding-top: 40px;
  &.right{
    .FramePanelLayout--rightTop{
      right: 0px;
      transform: scaleX(-1);
    }
  }
  &--title{
    width: 100%;
    height: 40px;
    background-image: url('@/assets/screen/标题.png');
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 40px;
    &__icon{
      width: 40px;
      height: 40px;
      background-image: url('@/assets/screen/点缀2.png');
      background-size: cover;
      display: inline-block;
      float: left;
    }
    &__label{
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #DBECFB;
      letter-spacing: 2px;
      font-weight: 500;
      display: inline-block;
    }
    &__subtitle{
      position: absolute;
      right: 12px;
      top: 10px;
    }
  }
  &--content{
    height: 100%;
  }

  &--topline{
    width: 431px;
    height: 3px;
    background-image: url('@/assets/screen/底部线条.png');
    background-size: cover;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  &--bottomline{
    width: 431px;
    height: 3px;
    background-image: url('@/assets/screen/底部线条.png');
    background-size: cover;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  &--rightTop{
    width: 478px;
    height: 195px;
    background-image: url('@/assets/screen/右上角1.png');
    background-size: cover;
    pointer-events: none;

    position: absolute;
    right: -40px;
    top: -40px;
  }
}
</style>
